// 思路:promise的异步顺序处理

// 数据
var data = [
    { name: "红", time: 3,color:'red',fn() { } },
    { name: "黄", time: 2,color:'yellow', fn() { } },
    { name: "绿", time: 1,color:'green', fn() { } }
]
// import data from './data.js'//我想用模块化但是它不跑,还不报错

// 抽象函数
function light(str,time) {
    return function () {
        return new Promise(res => {
            console.log(str);
            setTimeout(() => {
                res()
            }, time * 1000)
        })
    }
}


// 用数据生成函数
function d2f(arr) {
    let totalTime = 0;
    // arr.forEach(item=>{
    //     item.fn = light(`当前是${item.name}灯,${item.time}秒后打印`, item.time)
    //     totalTime += item.time
    // })

    // 用for改写是为了能把'打印黄灯...'输出出来
    for (let i = 0; i < arr.length; i++) {
        if (i < arr.length - 1) {
            arr[i].fn = light(`当前是${arr[i].name}灯,${arr[i].time}秒后打印${arr[i + 1].name}灯`, arr[i].time)
        } else {
            arr[i].fn = light(`当前是${arr[i].name}灯,${arr[i].time}秒后打印${arr[0].name}灯`, arr[i].time)
        }
        totalTime += arr[i].time//统计总时间
    }
    return totalTime;
}


// 循环打印
var lights = document.querySelectorAll('.light');
var message = document.querySelector('.message');
let time = d2f(data)
let timer;
clearInterval(timer)//这部分得写在函数外面,不然就是每次调用函数都是在重新声明一个定时器

function loop(flag) {
    async function print() {
        for (let i = 0; i < data.length; i++) {
            lights.forEach(item => {
                item.classList.remove('active')
            })
            lights[i].classList.add('active')
            lights[i].style = "--clr:" + data[i].color;
            if (i < data.length - 1) {
                str = `当前是${data[i].name}灯,${data[i].time}秒后打印${data[i + 1].name}灯`
            } else {
                str = `当前是${data[i].name}灯,${data[i].time}秒后打印${data[0].name}灯`
            }
            message.innerHTML = str;

            await data[i].fn()
        }
    }
    if (flag) {
        console.log("开启成功");
        timer = setInterval(print, time * 1000)
    } else {
        console.log("关闭成功");
        clearInterval(timer)
    }
}

// 绑定按钮
var btn = document.querySelector('.btn');

btn.flag = false
btn.onclick = function () {
    loop(btn.flag)
    btn.flag = !btn.flag;
    // btn.setAttribute('flag',!btn.getAttribute('flag'))//属性是字符串!
}

loop(true)

// ——————————————————————————————————————————————————————————————————————
// 以下是前面正常写用到的函数
// function fn1() {
//     return new Promise(res => {
//         console.log("红灯");
//         setTimeout(() => {
//             res()
//         }, 5000)
//     })
// }
// function fn2() {
//     return new Promise(res => {
//         console.log("黄灯");
//         setTimeout(() => {
//             res()
//         }, 3000)
//     })
// }
// function fn3() {
//     return new Promise(res => {
//         console.log('绿灯');
//         setTimeout(() => {
//             res()
//         }, 2000)
//     })
// }

// let red = light('当前是红灯,1秒后打印黄灯', 1)
// let yellow = light('当前是黄灯,1秒后打印绿灯', 1)
// let green = light('当前是绿灯,1秒后打印红灯', 1)
// red().then(() => {
//     return yellow()
// }).then(()=>{
//     return green()
// }).then(()=>{
//     console.log("打印完毕");
// })